<template>
	<div>
		<div class="tabNav tabNavs"><img src="../assets/img/home.png" />首页
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" @keyup.enter="onkeydown" suffix-icon="el-icon-search" v-model="input1">
			</el-input> -->
		</div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-row :gutter="10" class="mgb20">
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>用工平台数量</div>
									<img src="../assets/img/icon_1.png" />
								</div>
								<div class="grid-num">{{platformNum}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>企业数量</div>
									<img src="../assets/img/icon_2.png" />
								</div>
								<div class="grid-num">{{result}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>服务者数量</div>
									<img src="../assets/img/icon_3.png" />
								</div>
								<div class="grid-num">{{seviceCountNumber}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>个体工商户数量</div>
									<img src="../assets/img/icon_4.png" />
								</div>
								<div class="grid-num">{{settlementCountObj}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>任务数量</div>
									<img src="../assets/img/icon_5.png" />
								</div>
								<div class="grid-num">{{selectSeviceCountNumber}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>服务款总额</div>
									<img src="../assets/img/icon_6.png" />
								</div>
								<div class="grid-num grid-nums">{{formatNumber(selectSeviceAmountAll)}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>纳税额</div>
									<img src="../assets/img/icon_7.png" />
								</div>
								<div class="grid-num">{{formatNumber(selectSettleTaxAll)}}</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="3">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<div class="grid-cont-right">
									<div>开票额</div>
									<img src="../assets/img/icon_8.png" />
								</div>
								<div class="grid-num grid-nums">{{formatNumber(selectInvoiceAmountAll)}}</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="10">
				<el-card class="cardTits cardTitsss table-minheight" shadow="hover">
					<div class="cardTit select-color">用工平台交易额排名(TOP5)
						<el-select v-model="dateValues" placeholder="近一个月" @change="setDateRanges(dateValues)">
							<el-option v-for="item in options1" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<el-table :data="selectPlatformAmountOrder" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column type="index" sortable="custom" label="排名" width="100" align="center">
						</el-table-column>
						<el-table-column prop="platformName" sortable="custom" label-class-name="cardTitr" label="用工平台">
						</el-table-column>
						<el-table-column prop="businessAmountAll" sortable="custom" label="交易额">
						</el-table-column>
						<el-table-column prop="taxAll" sortable="custom" label="纳税额">
						</el-table-column>
						<el-table-column prop="billedAmountAll" label="开票额" width="100">
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="14">
				<el-card class="cardTits cardTitsss table-minheight" shadow="hover">
					<div class="cardTit">企业交易额排名(TOP5)
						<el-select v-model="dateValue" placeholder="近一个月" @change="setDateRange(dateValue)">
							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<el-table :data="selectBusinessAmountOrder" stripe style="width: 100%" @sort-change="sortChange1">
						<el-table-column type="index" label="排名" sortable="custom" width="100" align="center">
						</el-table-column>
						<el-table-column prop="businessName" sortable="custom" label="企业名称" width="150">
						</el-table-column>
						<el-table-column prop="industyMsg" id="bs.industyMsg" sortable="custom" label="行业">
						</el-table-column>
						<el-table-column prop="platformName" sortable="custom" label="用工平台">
						</el-table-column>
						<el-table-column prop="businessAmountAll" sortable="custom" label="交易额" width="100">
						</el-table-column>
						<el-table-column prop="taxAll" sortable="custom" label="纳税额" width="100">
						</el-table-column>
						<el-table-column prop="billedAmountAll" label="开票额" width="100">
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card shadow="hover" class="schartInfo">
					<div class="schartInfos">
						<p style="float: left">服务者数量统计</p>
						<div class="block">
							<!-- <strong><a href="https://map.baidu.com/@12963186.402038017,4824641.49530649,12.74z">
									查看地图
								</a></strong> -->
							<em :class="[echartsActive1 == 1 ? 'activeStyleColor' : '']" @click="dataSelect(1)">今日</em>
							<em :class="[echartsActive1 == 2 ? 'activeStyleColor' : '']" @click="dataSelect(2)">本周</em>
							<em :class="[echartsActive1 == 3 ? 'activeStyleColor' : '']" @click="dataSelect(3)">本月</em>
							<em :class="[echartsActive1 == 4 ? 'activeStyleColor' : '']" @click="dataSelect(4)">本年</em>
							<el-date-picker
								v-model="serviceDateVal"
								type="daterange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								range-separator="~">
							</el-date-picker>
						</div>
					</div>
					<el-row :gutter="20">
						<el-col :span="14">
							<span>每月统计</span>
						</el-col>
						<!-- <el-col :span="7">
							<span>服务者性别占比</span>
						</el-col> -->
						<el-col :span="10">
							<span>入驻平台排名(TOP5)</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<div id="schartBar"></div>
						</el-col>
						<!-- <el-col :span="7">
							<div class="schartPies">
								<div id="schartPie"></div>
							</div>
						</el-col> -->
						<el-col :span="10">
							<div class="pinking">
								<ul>
									<li v-for="(item,index) in selectPlatformBarCount" :key="index">
										<b>{{item.itemName}}</b>
										<span>{{item.countItemNum}}</span>
										<i></i>
										<strong></strong>
									</li>
									<li v-for="(item,index) in (5 - selectPlatformBarCount.length)" :key="index">
										<b>--</b>
										<strong></strong>
									</li>
								</ul>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card shadow="hover" class="schartInfo">
					<div class="schartInfos">
						<p style="float: left">个体工商户数量统计</p>
						<div class="block">
							<!-- <strong><a href="https://map.baidu.com/@12963186.402038017,4824641.49530649,12.74z">
									查看地图
								</a></strong> -->
							<em :class="[echartsActive2 == 1 ? 'activeStyleColor' : '']" @click="dataSelect1(1)">今日</em>
							<em :class="[echartsActive2 == 2 ? 'activeStyleColor' : '']" @click="dataSelect1(2)">本周</em>
							<em :class="[echartsActive2 == 3 ? 'activeStyleColor' : '']" @click="dataSelect1(3)">本月</em>
							<em :class="[echartsActive2 == 4 ? 'activeStyleColor' : '']" @click="dataSelect1(4)">本年</em>
							<el-date-picker
								v-model="individualDateVal"
								type="daterange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								range-separator="~">
							</el-date-picker>
						</div>
					</div>
					<el-row :gutter="20">
						<el-col :span="14">
							<span>每月统计</span>
						</el-col>
						<!-- <el-col :span="7">
							<span>服务者性别占比</span>
						</el-col> -->
						<el-col :span="10">
							<span>所属行业排名(TOP5)</span>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<div id="schartBars"></div>
						</el-col>
						<!-- <el-col :span="7">
							<div class="schartPies">
								<div id="schartPies"></div>
							</div>
						</el-col> -->
						<el-col :span="10">
							<div class="pinking">
								<ul>
									<li v-for="(item,index) in selectScopeBarCount" :key="index">
										<b>{{item.itemName}}</b>
										<span>{{item.countItemNum}}</span>
										<i></i>
										<strong></strong>
									</li>
									<li v-for="(item,index) in (5 - selectScopeBarCount.length)" :key="index">
										<b>--</b>
										<strong></strong>
									</li>
								</ul>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTites" shadow="hover">
					<div class="cardTit">任务列表
						<router-link to="/assignment">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
					</div>
					<v-tasktable></v-tasktable>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	// 任务信息
	import vTasktable from '../components/table/Tasktable.vue'
	export default {
		name: "dashboard",
		data() {
			return {
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				selectScopeBarCount: [],
				selectPlatformBarCount: [],
				selectBusinessAmountOrder: [],
				selectPlatformAmountOrder: [],
				selectSevicerBarCountNum: [],
				selectSevicerBarCountData: [],
				selectSelfBusinessBarCountData: [],
				selectSelfBusinessBarCountNum: [],
				nowDate: '',
				nowDates: '',
				platformNum: 0,
				currentPage4: 50,
				name: localStorage.getItem("ms_username"),
				data: [],
				options1: [{
					label: '近一个月',
					value: 1,
				}, {
					label: '近三个月',
					value: 2,
				}, {
					label: '近半年',
					value: 3,
				}, {
					label: '近一年',
					value: 4
				}],
				options2: [{
					label: '近一个月',
					value: 1,
				}, {
					label: '近三个月',
					value: 2,
				}, {
					label: '近半年',
					value: 3,
				}, {
					label: '近一年',
					value: 4
				}],
				value: '',
				value2: '',
				dateValue: 1,
				dateValues: 1,
				input1: '',
				result: 0,
				seviceCountNumber: 0,
				settlementCountObj: 0,
				selectSeviceCountNumber: 0,
				selectSettleTaxAll: 0,
				selectSeviceAmountAll: 0,
				selectInvoiceAmountAll: 0,
				serviceDateVal: '',
				individualDateVal: '',
				echartsActive1: 3,
				echartsActive2: 3
			};
		},
		components: {
			vTasktable
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		watch: {
			serviceDateVal(val) {
				if(val === null){
					this.selectSevicerBarCounts(this.echartsActive1, val)
					this.selectPlatformBarCounts(this.echartsActive2, val)
				}else {
					this.selectSevicerBarCounts(0, val)
					this.selectPlatformBarCounts(0, val)
				}
				// this.selectSevicerBarCounts(this.echartsActive1, val)
				// this.selectPlatformBarCounts(this.echartsActive2, val)
			},
			individualDateVal(val) {
				if(val === null){
					this.selectSelfBusinessBarCounts(this.echartsActive1, val)
					this.selectScopeBarCounts(this.echartsActive2, val)
				}else {
					this.selectSelfBusinessBarCounts(0, val)
					this.selectScopeBarCounts(0, val)
				}
				
			}
		},
		mounted() {
			// this.schartBar();
			// this.schartPie();
			// this.schartBars();
			// this.schartPies();
			this.getinfoData();
			this.getinBusinessfoData();
			this.seviceCount();
			this.settlementCount();
			this.selectSeviceCount();
			this.selectSettleTaxAlls();
			this.selectSeviceAmountAlls();
			this.selectInvoiceAmountAlls();
			this.setDateRange(1);
			this.setDateRanges(1);
			this.selectSelfBusinessBarCounts(3);
			this.selectSevicerBarCounts(3);
			this.selectScopeBarCounts(3);
			this.selectPlatformBarCounts(3);
		},
		methods: {
			setDateRange(val) {
				let date = new Date();
				var y = date.getFullYear();//获取完整的年份(4位)
				var ys = date.getFullYear();
				var m = date.getMonth();
				var ms = date.getMonth() + 1;
				if (val === 1) {
					m = m - 0;
				} else if (val === 2) {
					m = m - 2;
				}else if (val === 3) {
					m = m - 5;
				} else if (val === 4) {
					m = m - 11;
				} else {
					return
				}
				if(m <= 0) {
					ys = parseInt(ys) - 1;
					m = m + 12;
					if(m > 0 && m < 10) {
						m = '0' + m 
					}
				}else if(m > 0 && m < 10) {
					m = '0' + m 
				}
				if(ms < 10) {
					ms = '0' + ms 
				}
				let day = date.getDate(); // 日
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.nowDate =`${ys}-${m}-${day} ${hour}:${minute}:${second}`;
				this.nowDates =`${y}-${ms}-${day} ${hour}:${minute}:${second}`;
				this.selectBusinessAmountOrders(this.nowDate,this.nowDates);
			},
			setDateRanges(val) {
				let date = new Date();
				var y = date.getFullYear();//获取完整的年份(4位)
				var ys = date.getFullYear();
				var m = date.getMonth();
				var ms = date.getMonth() + 1;
				if (val === 1) {
					m = m - 0;
				} else if (val === 2) {
					m = m - 2;
				}else if (val === 3) {
					m = m - 5;
				} else if (val === 4) {
					m = m - 11;
				} else {
					return
				}
				if(ms < 10) {
					ms = '0' + ms 
				}
				if(m <= 0) {
					ys = parseInt(y) - 1;
					m = m + 12;
					if(m > 0 && m < 10) {
						m = '0' + m 
					}
				}else if(m > 0 && m < 10) {
					m = '0' + m 
				}
				let day = date.getDate(); // 日
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.nowDate =`${ys}-${m}-${day} ${hour}:${minute}:${second}`;
				this.nowDates =`${y}-${ms}-${day} ${hour}:${minute}:${second}`;
				this.selectPlatformAmountOrders(this.nowDate,this.nowDates);
			},
			dataSelect(id){
				this.echartsActive1 = id
				this.selectSevicerBarCounts(id);
				this.selectPlatformBarCounts(id);
			},
			dataSelect1(id){
				this.echartsActive2 = id
				this.selectSelfBusinessBarCounts(id);
				this.selectScopeBarCounts(id);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			schartBar() {
				// 服务者柱状统计图
				document.getElementById('schartBar').innerHTML = ''
				document.getElementById('schartBar').removeAttribute("_echarts_instance_")
				document.getElementById('schartBar').removeAttribute("style")
				let myChart = echarts.init(document.getElementById('schartBar'));
				let _this = this
				let option = {
					color: ['#326CF0'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter(datas) {
							let val = ''
							if(_this.echartsActive1 == 4) {
								val = datas[0].name + '月'
							} else {
								let month = new Date().getMonth() + 1
								val = month + '月' + datas[0].name + '日'
							}
							var res = val + '<br/>';
							res += '服务者数量：' + datas[0].data
							return res;
						}
					},
					xAxis: [{
						type: 'category',
						data: this.selectSevicerBarCountNum,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						// name: '每月花费',
						type: 'bar',
						barWidth: 15,
						data: this.selectSevicerBarCountData,
						// data: [374, 518, 200, 35, 790, 234, 178, 470, 390, 930, 434, 278],
					}]
				};
				myChart.setOption(option);

				//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
				window.addEventListener('resize', function() {
					myChart.resize()
				});
			},
			schartBars() {
				// 个体工商户柱状统计图
				document.getElementById('schartBars').innerHTML = ''
				document.getElementById('schartBars').removeAttribute("_echarts_instance_")
				document.getElementById('schartBars').removeAttribute("style")
				let myChart = echarts.init(document.getElementById('schartBars'));
				let _this = this
				let option = {
					color: ['#326CF0'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter(datas) {
							let val = ''
							if(_this.echartsActive2 == 4) {
								val = datas[0].name + '月'
							} else {
								let month = new Date().getMonth() + 1
								val = month + '月' + datas[0].name + '日'
							}
							var res = val + '<br/>';
							res += '个体工商户数量：' + datas[0].data
							return res;
						}
					},
					xAxis: [{
						type: 'category',
						data: this.selectSelfBusinessBarCountData,
						// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', ],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						// name: '每月花费',
						type: 'bar',
						barWidth: 15,
						data: this.selectSelfBusinessBarCountNum,
						// data: [374, 518, 200, 35, 790, 234, 178, 470, 390, 930, 434, 278],
					}]
				};
				myChart.setOption(option);

				//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
				window.addEventListener('resize', function() {
					myChart.resize()
				});
			},
			getinfoData() {
				// 用工平台类型数量统计
				this.$http({
					url: '/api/platform/selectPlatformListByName',
				method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.platformNum = data.result.platformNum
					}
				})
			},
			getinBusinessfoData() {
				// 企业信息数量统计
				this.$http({
					url: '/api/business/selectBusinessBusinessCount',
				method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.result = data.result
					}
				})
			},
			seviceCount() {
				// 获取服务者数量
				this.$http({
					url: '/api/sevicer/selectSeviceCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.seviceCountNumber = data.result
					}
				})
			},
			settlementCount() {
				// 获取个体户数量
				this.$http({
					url: '/api/selfbusiness/selectSelfBusinessCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.settlementCountObj = data.result
					}
				})
			},
			selectSeviceCount() {
				// 获取任务数量
				this.$http({
					url: '/api/task/selectTaskCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectSeviceCountNumber = data.result
					}
				})
			},
			selectSettleTaxAlls() {
				// 纳税额
				this.$http({
					url: '/api/index/selectSettleTaxAll',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectSettleTaxAll = data.result
					}
				})
			},
			selectSeviceAmountAlls() {
				// 服务款总数量
				this.$http({
					url: '/api/index/selectSeviceAmountAll',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectSeviceAmountAll = data.result
					}
				})
			},
			selectInvoiceAmountAlls() {
				// 开票额
				this.$http({
					url: '/api/index/selectInvoiceAmountAll',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectInvoiceAmountAll = data.result
					}
				})
			},
			selectBusinessAmountOrders() {
				// 企业交易额排名
				this.$http({
					url: '/api/index/selectBusinessAmountOrder',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						"endTime": this.nowDates,
						"pageNum": 1,
						"pageSize": 5,
						"startTime": this.nowDate,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectBusinessAmountOrder = data.result.list
						let lengthNum = 5 - data.result.list.length
						for(let i = 0; i < lengthNum; i++) {
							this.selectBusinessAmountOrder.push({
								businessName: '—',
								industyMsg: '—',
								platformName: '—',
								businessAmountAll: '—',
								taxAll: '—',
								billedAmountAll: '—'
							})
						}
					}
				})
			},
			selectPlatformAmountOrders() {
				// 灵工平台交易额排名
				this.$http({
					url: '/api/index/selectPlatformAmountOrder',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						"endTime": this.nowDates,
						"pageNum": 1,
						"pageSize": 5,
						"startTime": this.nowDate,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.selectPlatformAmountOrder = data.result.list
						let lengthNum = 5 - data.result.list.length
						for(let i = 0; i < lengthNum; i++) {
							this.selectPlatformAmountOrder.push({
								platformName: '—',
								businessAmountAll: '—',
								taxAll: '—',
								billedAmountAll: '—'
							})
						}
					}
				})
			},
			selectSelfBusinessBarCounts(id, date) {
				// 个体工商户数量统计-柱状图
				let data = {
					"dateType": id,
					"size": 2
				}
				if(id == 0 && date != undefined) {
					data['stateTime'] = new Date(date[0])
					data['endTime'] = new Date(date[1])
				}
				this.$http({
					url: '/api/index/selectSelfBusinessBarCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: data
				}).then(data => {
					if(data.code === 0) {
						this.selectSelfBusinessBarCountNum = []
						this.selectSelfBusinessBarCountData = []
						for(var i = 0; i < data.result.length; i++){
							this.selectSelfBusinessBarCountNum.push(data.result[i].countNum);
							this.selectSelfBusinessBarCountData.push(data.result[i].dateKey)
						}
						this.schartBars()
					}
				})
			},
			selectSevicerBarCounts(id, date) {
				// 服务者数量统计-柱状图
				let data = {
					"dateType": id,
					"size": 2
				}
				if(id == 0 && date != undefined) {
					data['stateTime'] = new Date(date[0])
					data['endTime'] = new Date(date[1])
				}
				this.$http({
					url: '/api/index/selectSevicerBarCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: data
				}).then(data => {
					if(data.code === 0) {
						this.selectSevicerBarCountNum = []
						this.selectSevicerBarCountData = []
						for(var i = 0; i < data.result.length; i++){
							this.selectSevicerBarCountNum.push(data.result[i].dateKey);
							this.selectSevicerBarCountData.push(data.result[i].countNum)
						}
						this.schartBar()
					}
				})
			},
			selectScopeBarCounts(id, date) {
				// 个体工商户数量统计-行业排名
				let data = {
					"dateType": id,
					"size": 2
				}
				if(id == 0 && date != undefined) {
					data['stateTime'] = new Date(date[0])
					data['endTime'] = new Date(date[1])
				}
				this.$http({
					url: '/api/index/selectScopeBarCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: data
				}).then(data => {
					if(data.code === 0) {
						this.selectScopeBarCount = data.result
					}
				})
			},
			selectPlatformBarCounts(id, date) {
				// 服务者数量统计-入驻平台排名
				let data = {
					"dateType": id,
					"size": 2
				}
				if(id == 0 && date != undefined) {
					data['stateTime'] = new Date(date[0])
					data['endTime'] = new Date(date[1])
				}
				this.$http({
					url: '/api/index/selectPlatformBarCount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: data
				}).then(data => {
					if(data.code === 0) {
						this.selectPlatformBarCount = data.result
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.prop == "platformName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.prop
				}
				this.selectPlatformAmountOrders()
				},
			sortChange1(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.prop == "businessName" || d.id == "bs.industyMsg" || d.prop == "platformName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.prop
				}
				this.selectBusinessAmountOrders()
			},
		}
	};
</script>
<style scoped>
	.schartInfos em:hover {
		color: #326cf0;
	}
	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		height: 100px;
		padding: 20px 18px 0;
		justify-content: space-between;
	}

	.grid-cont-right {
		text-align: left;
		font-size: 12px;
		color: #6C8198;
		display: flex;
		/* padding-left: 20px; */
		justify-content: space-between;
		align-items: center;
	}

	.grid-num {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.grid-nums {
		font-size: 18px;
	}

	.grid-content img {
		font-size: 20px;
		width: 36px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		color: #fff;
		/* position: relative;
		top: -22px;
		right: 20px; */
		border-radius: 2px;
		margin-left: 4px;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: #0A2E6A;
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.tabNav {
		font-size: 14px;
		margin-bottom: 25px;
		text-indent: 5px;
	}

	.tabNavs {
		color: #0A2E6A;
	}

	.tabNav img {
		position: relative;
		top: 1px;
		left: -5px;
	}

	.el-input {
		float: right;
		width: 320px;
		position: relative;
		top: -5px;
		line-height: 32px;
	}
</style>
<style>
	.table-minheight .el-table tr th,
	.table-minheight .el-table tr td {
		height: 40px;
	}
	.select-color .el-input__inner {
		color: #0a2e6a;
		border-color: #EEF4FB;
	}
	.select-color i.el-input__icon {
		color: #6C8198 !important;
	}
	#schartBar,
	#schartBars {
		width: 100%;
		height: 300px;
		float: left;
	}

	#schartPie,
	#schartPies {
		width: 300px;
		height: 300px;
		margin-top: -35px;
	}

	.pinking {
		float: right;
		width: 84%;
		margin: 35px 52px 0 0;
	}

	.schartInfo .el-card {
		padding: 0;
	}

	.pinking li {
		list-style: none;
		width: 88%;
		float: left;
		position: relative;
	}

	.pinking li b {
		float: left;
		font-size: 12px;
		color: #6C8198;
		font-weight: normal;
	}

	.pinking li i {
		width: 80%;
		position: absolute;
		height: 10px;
		left: 0;
		background: #EC5F59;
		border-radius: 10px;
		bottom: 14px;
	}
	.pinking li:nth-child(2) i {
		background: #F5C845;
		width: 70%;
	}
	.pinking li:nth-child(3) i {
		background: #745AF6;
		width: 60%;
	}
	.pinking li:nth-child(4) i {
		background: #3565F6;
		width: 50%;
	}
	.pinking li:nth-child(15) i {
		background: #8DDFBD;
		width: 40%;
	}
	.pinking li span {
		font-size: 12px;
		float: right;
		margin: 0;
	}

	.pinking li strong {
		width: 100%;
		background: #F6F9FD;
		height: 10px;
		float: left;
		border-radius: 10px;
		margin: 3px 0 14px;
	}

	.schartPie {
		width: 300px;
		height: 300px;
		float: left;
		transform: scale(0.75);
		margin-top: -30px;
	}

	.schartPies em {
		position: relative;
		font-style: normal;
		font-size: 14px;
		color: #6C8198;
		background: #fff;
		border-radius: 100%;
		width: 119px;
		height: 119px;
		left: -209px;
		z-index: 11111;
		top: 61px;
		display: inline-block;
		text-align: center;
		line-height: 119px;
	}

	.schartBar {
		width: 50%;
		height: 275px;
		margin-left: 25px;
		float: left;
	}

	.schartInfo span strike {
		display: inline-block;
		margin-left: 766px;
		position: relative;
		text-decoration: none;
	}

	.schartInfos {
		line-height: 50px;
		height: 50px;
		font-size: 14px;
		padding-left: 20px;
		color: #0A2E6A;
		font-weight: normal;
		border-bottom: 1px solid #EEF4FB;
	}

	.schartInfo span {
		font-size: 14px;
		color: #6C8198;
		margin: 25px 0 0 25px;
		display: block;
	}

	.editor .el-button--text {
		transform: scale(.85);
	}

	.editor .el-table .cell {
		padding-left: 0;
	}

	.cardTites .download {
		color: #95A8BE;
		font-size: 12px;
		margin: 0 20px 15px;
	}

	.download i {
		color: #326CF0;
	}

	.cardTits .el-table td.editor {
		color: #326CF0;
		cursor: pointer;
	}

	.download b {
		color: #326CF0;
		margin: 0 3px;
	}

	.download span {
		color: #326CF0;
		border: 1px solid #326CF0;
		padding: 3px 7px;
		border-radius: 5px;
		background: #F2F3FE;
		margin: 0 10px 0 50px;
		cursor: pointer;
	}

	.download em {
		color: #326CF0;
		font-style: normal;
		border-left: 1px solid #999;
		padding-left: 10px;
		cursor: pointer;
	}

	.el-pager li {
		color: #6C8198;
		font-weight: normal;
		border: 1px solid #EEF4FB;
		border-radius: 5px;
		padding: 0;
		margin: 0 5px;
		height: 30px;
		line-height: 30px;
		min-width: 32px;
	}

	.el-pager li.active {
		color: #fff;
		cursor: default;
		background: #326CF0;
	}

	.tabNav .el-input__inner {
		height: 32px;
		line-height: 32px;
		border-radius: 32px;
		border: 0;
	}

	.tabNav .el-input__inner::placeholder {
		color: #DDEAFA;
	}

	.tabNav .el-input__suffix {
		right: 10px;
		top: -3px;
		width: 20px;
		left: inherit;
	}

	.el-input--prefix .el-input__inner {
		padding-left: 15px;
	}

	.el-card__body,
	.el-main {
		padding: 0;
	}

	.cardTit {
		color: rgba(10, 46, 106, 1);
		line-height: 50px;
		padding-left: 20px;
		font-size: 14px;
		font-weight: normal;
	}

	.cardTit .el-input__inner {
		width: 120px;
		height: 32px;
		line-height: 32px;
	}

	.cardTit .el-select {
		float: right;
		margin: 10px 18px 0 0;
	}

	.cardTit .el-input__suffix {
		top: 5px;
	}

	.cardTit .el-select .el-input .el-select__caret.is-reverse {
		top: -10px;
		position: relative;
	}

	.cardTits .el-card {
		border-radius: 5px;
	}

	.cardTites .el-card {
		height: auto;
	}

	.cardTit b {
		float: right;
		font-size: 12px;
		font-weight: normal;
		margin-right: 30px;
		color: #326CF0;
		cursor: pointer;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #326CF0;
		border-color: #326CF0;
	}

	.cardTitsss .el-card {
		padding: 0;
	}

	.schartInfos .el-range-editor.el-input__inner {
		float: right;
		padding: 0px;
		height: 32px;
		width: 280px;
		margin: 9px 18px 0 0;
	}

	.schartInfos .el-date-editor .el-range__icon {
		position: absolute;
		right: 0;
	}

	.schartInfos .el-range-editor .el-range-input {
		width: 90px;
	}

	.schartInfos .el-date-editor .el-range-separator {
		font-weight: normal;
		color: #ccc;
		padding: 0;
	}

	.schartInfos .block {
		float: right;
	}

	.schartInfos em {
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
		color: #6C8198;
		margin-right: 15px;
		cursor: pointer;
	}

	.schartInfos strong a {
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
		color: #326CF0;
		position: absolute;
		right: 30px;
		top: 0;
		cursor: pointer;
	}
	.activeStyleColor {
		color: #326CF0 !important;
	}
</style>
